<!DOCTYPE html>
<html style="height: 90%">
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../css/public.css" media="all" />
</head>
<body class="childrenBody" style="height: 90%; margin: 0">
<div class="layui-row layui-col-space20 panel_box">
	<div class="panel layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg3">
		<a href="javascript:;">
			<div class="panel_icon layui-bg-blue">
				<i  class="layui-anim seraph"><i class="layui-icon layui-icon-gouwuche" aria-hidden="true" style="color:white"></i></i>
			</div>
			<div class="panel_word">
				<span>45</span>
				<cite>总房源数量</cite>
			</div>
		</a>
	</div>
	<div class="panel layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg3">
		<a href="javascript:;">
			<div class="panel_icon layui-bg-green">
				<i class="layui-anim seraph"><i class="layui-icon layui-icon-shujufenxi" aria-hidden="true" style="color:white"></i></i>
			</div>
			<div class="panel_word">
				<span>1</span>
				<cite>经纪人数量</cite>
			</div>
		</a>
	</div>
	<div class="panel layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg3">
		<a href="javascript:;">
			<div class="panel_icon layui-bg-orange">
				<i class="layui-anim seraph"><i class="layui-icon layui-icon-yonghuzu" aria-hidden="true" style="color:white"></i></i>
			</div>
			<div class="panel_word userAll">
				<span></span>
				<cite>用户总数</cite>
			</div>
		</a>
	</div>
	<div class="panel layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg3">
		<a href="javascript:;">
			<div class="panel_icon layui-bg-red">
				<i class="layui-anim seraph"><i class="layui-icon layui-icon-yonghu" aria-hidden="true" style="color:white"></i></i>
			</div>
			<div class="panel_word">
				<span>10</span>
				<cite>总委托量</cite>
			</div>
		</a>
	</div>
</div>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript">
	layui.use(['form','element','layer','jquery'],function(){
		var form = layui.form,
				layer = parent.layer === undefined ? layui.layer : top.layer,
				element = layui.element;
		$ = layui.jquery;
		//icon动画
		$(".panel a").hover(function(){
			$(this).find(".layui-anim").addClass("layui-anim-scaleSpring");
		},function(){
			$(this).find(".layui-anim").removeClass("layui-anim-scaleSpring");
		})
		$(".panel a").click(function(){
			parent.addTab($(this));
		})

		//用户数量
		$.get("../json/userList.json",function(data){
			$(".userAll span").text(data.count);
		})

	})
</script>
<script type="text/javascript">
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};

	var option;

	option = {
		title: {
			text: '标题',
			left: 'center'
		},
		xAxis: {
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			data: [150, 230, 224, 218, 135, 147, 260, 300, 500, 50, 20, 300],
			type: 'line'
		}]
	};

	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}

</script>
</body>
</html>